<template>
  <div id="self_bartending_canning">
    <c-title :hide="false" text="灌装"></c-title>
    <template v-if="info">
      <div class="bartendingCard" v-for="(item, index) in info.has_many_barrel" :key="index">
        <div class="cardTag">
          <div class="cardTagTitle">{{ item.label }}</div>
          <div class="cardTagOption"></div>
        </div>
        <div class="lineBox">
          <div class="left">选择基酒</div>
          <div class="right">
            <div class="right_detail" v-if="item.has_one_good && item.has_one_good.id">
              <img :src="item.has_one_good.thumb" class="right_img" alt="" />
              <div class="right_detail_r">
                <div class="right_detail_r_t">{{ item.has_one_good.title }}</div>
                <div class="right_detail_r_b">
                  <div class="right_detail_r_b_price">¥ {{ item.has_one_good.price }}</div>
                  <div class="btn" @click="togglePopup(index)">更换基酒</div>
                </div>
              </div>
            </div>
            <div class="btn" v-else @click="togglePopup(index)">选择基酒</div>
          </div>
        </div>
        <div class="lineBox">
          <div class="left">更换量</div>
          <div class="right" style="flex: 1">
            <div class="inpBox">
              <input type="number" v-model="item.ml" placeholder="请输入" />
              <div class="txt">ml</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="posBox set-pc-style">
      <div class="btn" @click="encapsulation">确定灌装</div>
    </div>

    <search-good-list-popup :goods_type="2" :showPopup="showPopup" @childSelect="childSelect" @close="closePopup"></search-good-list-popup>
  </div>
</template>
<script>
import searchGoodListPopup from "../components/searchGoodListPopup.vue";
export default {
  data() {
    return {
      showPopup: false,
      list: [],
      info: null,
      selectInd: null
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    togglePopup(key) {
      this.selectInd = key;
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
      this.selectInd = null;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.device.info", { id: this.$route.params.id }, "");
      if (result) {
        this.info = data;
        for (let i = 0; i < this.info.has_many_barrel.length; i++) {
          this.info.has_many_barrel[i].ml = "";
        }
      } else {
        this.$toast(msg);
      }
    },
    childSelect(e) {
      // e.thumb_url = e.thumb;
      this.info.has_many_barrel[this.selectInd].has_one_good = e;
      this.closePopup();
    },
    async encapsulation() {
      let good = [];
      good = this.info.has_many_barrel
        .map(barrel => {
          if (barrel.has_one_good) {
            return {
              id: barrel.id,
              wine_id: barrel.has_one_good.id,
              ml: barrel.ml
            };
          }
          return null; // 或者返回一个默认值，视业务需求而定
        })
        .filter(item => item !== null); // 过滤掉 null 值
      let findgood = good
        .map(item => {
          if (item.ml) {
            return item;
          }
        })
        .filter(item => item !== undefined); // 过滤掉 null 值;
      // if (!findgood) {
      //   this.$toast("请输入更换量");
      //   return;
      // }
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.device.fill", { barrel: findgood }, "");
      if (result) {
        this.$toast(msg);
        this.getData();
      } else {
        this.$toast(msg);
      }
    }
  },
  components: {
    searchGoodListPopup
  }
};
</script>
<style lang="scss" scoped>
#self_bartending_canning {
  margin: 0.63rem 0.75rem;
  padding-bottom: 5rem;
  .bottom-button {
    width: 6.25rem;
    height: 2.25rem;
    background: #ffffff;
    border-radius: 1.25rem;
    border: 0.03rem solid #f15353;
    font-weight: 500;
    font-size: 0.81rem;
    color: #f15353;
    text-align: center;
    line-height: 2.25rem;
  }
  .posBox {
    width: 100%;
    box-sizing: border-box;
    padding: 0.63rem 0.75rem;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    .btn {
      padding: 0.75rem 0;
      background: #f15353;
      border-radius: 1.28rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      line-height: 1rem;
    }
  }
  .bartendingCard {
    padding: 1.06rem 0.69rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-bottom: 0.63rem;
    .cardTag {
      display: flex;
      justify-content: space-between;
      border-bottom: 1.0016px solid #f0f0f1;
      padding-bottom: 1rem;
      .cardTagTitle {
        font-weight: bold;
        font-size: 0.94rem;
      }
      .cardTagOption {
        display: flex;
        align-items: center;
        color: #f15353;

        .iconfont {
          font-size: 1.2rem;
        }
        .icon-appointment_delete {
          margin-left: 1.56rem;
        }
      }
    }
    .lineBox {
      padding: 0.94rem 0 0 0;
      display: flex;
      justify-content: flex-start;
      .left {
        flex-shrink: 0;
        width: 4.25rem;
        text-align: left;
      }
      .right {
        flex: 1;
        margin-left: 0.75rem;
        .inpBox {
          flex: 1;
          display: flex;
          align-items: center;
          border-radius: 0.5rem;
          border: 0.03rem solid #d6d6dc;
          height: 2.25rem;
          padding: 0 0.75rem;
          input {
            flex: 1;
            background: #ffffff;
            border: none;
          }
          .txt {
            font-size: 0.88rem;
          }
        }
        .right_detail {
          display: flex;
          justify-content: space-between;
          .right_img {
            width: 4.38rem;
            height: 4.38rem;
            border-radius: 0.5rem;
            margin-right: 0.5rem;
            flex-shrink: 0;
          }
          .right_detail_r {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .right_detail_r_t {
              font-weight: 500;
              font-size: 0.81rem;
              text-align: left;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 1rem;
            }
            .right_detail_r_b {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .right_detail_r_b_price {
                margin-bottom: 0.31rem;
                font-weight: bold;
                font-size: 0.88rem;
                color: #f15353;
              }
            }
          }
        }
        .btn {
          background: #ffffff;
          border-radius: 0.88rem;
          border: 0.03rem solid #f15353;
          padding: 0.47rem 0.72rem;
          box-sizing: border-box;
          font-weight: 500;
          font-size: 0.81rem;
          color: #f15353;
          line-height: 0.9rem;
          width: 5rem;
        }
      }
    }
  }
}
</style>
